<template>
  <div>
    <el-dialog
      :visible="isShow"
      :title="title"
      width="30%"
      @close="closeoff"
      @open="openon"
    >
      <el-form :model="form" :rules="rules" ref="fuleForm">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select
            v-model="form.subjectID"
            style="width: 80%"
            placeholder="请选择"
          >
            <el-option
              :label="item.subjectName"
              :value="item.subjectID"
              v-for="item in subjectsList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input
            v-model="form.tagName"
            style="width: 80%"
            type="text"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="closeoff">取 消</el-button>
        <el-button type="primary" @click="addDirectorys">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { add } from '@/api/hmmm/tags'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    subjectsList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      title: '',
      form: {
        subjectID: '',
        tagName: ''
      },
      rules: {
        subjectID: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change']
          }
        ],
        tagName: [
          {
            required: true,
            message: '目录不能空',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },

  methods: {
    //   关闭弹框并清空表单
    closeoff () {
      this.$emit('update:isShow', false)
      this.$refs.fuleForm.resetFields()
    },
    // 新增目录获取数据给后台
    addDirectorys () {
      this.$refs.fuleForm.validate(async (val) => {
        if (!val) return
        await add(this.form)
        this.$message.success('新增成功')
        this.closeoff()
        this.$emit('updateAdd')
      })
    },
    openon () {
      this.$emit('getdata')
    }
  }
}
</script>

<style>
</style>
